<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数据展示表</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link rel="stylesheet" href="../CSS/DataViewingInterface_css.css" />
		<script src="../JS/DataViewingInterface_js.js"></script>
		<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
		<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
	</head>
	<body>
		<div>
			<h1 style="text-align: center;">数据展示表</h1>
		</div>
		<div class="tableDiv">
			<table border="1">
				<h2 style="text-align: center;">用户信息表</h2>
				<thead>
					<tr>
						<th data-label="Column 1">用户id</th>
						<th data-label="Column 2">用户名</th>
						<th data-label="Column 3">用户密码</th>
						<th data-label="Column 4">电子邮箱</th>
						<th data-label="Column 5">电话号码</th>
						<th data-label="Column 6">更改时间</th>
					</tr>
				</thead>
				<tbody>
				</tbody>
			</table>
		</div>
		<div>
			<p>
				<strong>
					1.干垃圾<br>
					2.湿垃圾<br>
					3.可回收物<br>
					4.不可回收垃圾<br>
					5.有害垃圾<br>
					6.无公害垃圾<br>
				</strong>
			</p>
		</div>
		<div>
			<h3>数据表排序</h3>
			<div>
				<button onclick="sortById()" class="button">根据ID排序(正序)</button>
				<button onclick="sortByName()" class="button">根据名字首字母排序(正序)</button>
				<button onclick="sortByEmail()" class="button">根据电子邮件首数字排序(正序)</button>
				<button onclick="sortByPhoneNumber()" class="button">根据电话号码首数字排序(正序)</button>
			</div>
			<h3>数据表更改</h3>
			<div>
				<button onclick="deleteAllUsers()" class="button">清空数据</button>
				<button onclick="deleteUser()" class="button">删除用户数据</button>
				<button onclick="selectAllUsers()" class="button">查看全部数据</button>
				<button onclick="selectById()" class="button">通过ID查看用户数据</button>
				<button onclick="selectByUsername()" class="button">通过用户名查看用户数据</button>
				<button onclick="selectByEmail()" class="button">通过电子邮件查看用户数据</button>
				<button onclick="selectByPhoneNumber()" class="button">通过电话号码查看用户数据</button>
				<button onclick="updateUser()" class="button">更新用户数据</button>
				<button onclick="pageUser()" class="button">分页查看用户数据</button>
				<button onclick="addUser()" class="button">添加用户数据</button>
			</div>
			<h3>页面操作</h3>
			<div>
				<button><a href="../index.html" class="button">返回首页</a></button>
			</div>
		</div>
		<div class="tableDiv">
			<table border="1">
				<h2 style="text-align: center;">用户信息表</h2>
				<thead>
				<tr>
					<th data-label="Column 1">垃圾分类id</th>
					<th data-label="Column 2">垃圾名称</th>
					<th data-label="Column 3">更改时间</th>
				</tr>
				</thead>
				<tbody>
				</tbody>
			</table>

        </div>
		<div>
			<p>
				<strong>
					1.干垃圾<br>
					2.湿垃圾<br>
					3.可回收物<br>
					4.不可回收垃圾<br>
					5.有害垃圾<br>
					6.无公害垃圾<br>
				</strong>
			</p>
		</div>
		<div>
			<h3>数据表排序</h3>
			<div>
				<button onclick="sortGarbageTypeById()" class="button">根据ID排序</button>
			</div>
			<h3>数据表更改</h3>
			<div>
				<button onclick="fetchAllGarbageTypes()" class="button">查看全部垃圾分类数据</button>
				<button onclick="fetchGarbageTypeById(id)" class="button">通过ID查看垃圾分类数据</button>
				<button onclick="addGarbageType()" class="button">添加垃圾分类数据</button>
				<button onclick="updateGarbageType()" class="button">更改垃圾分类数据</button>
				<button onclick="deleteGarbageType()" class="button">通过ID删除垃圾分类数据</button>
				<button onclick="fetchGarbageTypePage()" class="button">分页查看</button>
			</div>
		</div>
	<div>
		<h3>垃圾分类提交表</h3>
		<div>
			<form id="sortForm">
				<label for="sortId"></label><input type="text" id="sortId" placeholder="请输入排序ID">
				<button type="submit" class="button">提交</button>
			</form>
		</div>
		<div>
			<form id="pageForm">
				<label for="page"></label><input type="number" id="page" placeholder="页码">
				<label for="size"></label><input type="number" id="size" placeholder="每页显示数量">
				<button type="submit" class="button">提交</button>
			</form>
		</div>
		<div>
			<form id="deleteGarbageTypeForm">
				<label for="garbageTypeId"></label><input type="text" id="garbageTypeId" placeholder="垃圾分类id">
				<button type="submit" class="button">提交</button>
			</form>
		</div>
		<div>
			<form id="updateGarbageTypeForm">
				<input type="text" id="garbageTypeId" placeholder="垃圾分类id">
				<label for="garbageTypeName"></label><input type="text" id="garbageTypeName" placeholder="垃圾名称">
				<label for="garbageTypeUpdateTime"></label><input type="datetime-local" id="garbageTypeUpdateTime" placeholder="更改时间">
				<button type="submit" class="button">提交</button>
			</form>
		</div>
		<div>
			<form id="addGarbageTypeForm">
				<input type="text" id="garbageTypeName" placeholder="垃圾名称">
				<input type="datetime-local" id="garbageTypeUpdateTime" placeholder="更改时间">
				<button type="submit" class="button">提交</button>
			</form>
		</div>
		<div>
			<form id="idForm">
				<input type="text" id="garbageTypeId" placeholder="请输入垃圾分类id">
				<button type="submit" class="button">提交</button>
			</form>
		</div>
	</div>
	</body>
</html>